<style lang="less" scoped>
@import "../../style/menusty/menu.css";
</style>
<template>
  <div class="main">
    <div class="border-list">
      <!-- 查询输入框开始 -->
      <div class="roleInput">
        <span class="roleHint">菜单名称:</span
        ><el-input v-model="roleinput" placeholder="菜单名称查询"></el-input>
      </div>
      <div class="add-btn">
        <el-button
          type="primary"
          icon="el-icon-plus"
          @click="addVisible = true"
          class="addRoleBtn"
          >添加菜单</el-button
        >
      </div>
      <div class="roleSerch">
        <el-button type="primary" icon="el-icon-search" @click="query(roleinput)">查询</el-button>
        <el-button type="primary" icon="el-icon-refresh-left">重置</el-button>
      </div>
      <div class="from-list">
        <el-table :data="tableData" border style="width: 100%" class="tab-list">
          <el-table-column align="center" prop="date" label="id" width="80px">
          </el-table-column>
          <el-table-column
            align="center"
            prop="name"
            label="菜单名称"
            width="200"
          >
          </el-table-column>
          <el-table-column
            align="center"
            prop="address"
            label="菜单标识"
            width="300"
          >
          </el-table-column>
          <el-table-column
            align="center"
            prop="address"
            label="菜单路径"
            width="300"
          >
          </el-table-column>
        
          <el-table-column align="center" label="Action" width="318">
            　<template slot-scope="scope">
              
              　　　　　　<el-button
                type="text"
                @click="deleteUser(scope.row.phone)"
                >编辑</el-button
              >
              <el-button
                class="delete-btn"
                type="text"
                @click="deleteUser(scope.row.phone)"
                ><a href="" class="font">删除</a></el-button
              >
              　　　　</template
            >
          </el-table-column>
        </el-table>
        <!-- 分页 -->
              <!-- @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="currentPage4" -->
        <div class="fenye">
          <div class="block">
            <!-- <el-pagination
              background
               :current-page="queryinfo.pagenum" 
              :page-sizes="[1, 2, 5, 10]"
              :page-size="queryInfo.pagesize"
              layout="total, sizes, prev, pager, next, jumper"
              :total="total"
            >
            </el-pagination> -->
    
<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
    :current-page="queryInfo.pagenum" :page-size="queryInfo.pagesize" :page-sizes="[1, 2, 5, 10]" 
      layout="total, sizes, prev, pager, next ,jumper" :total="total">
</el-pagination>



          </div>
        </div>
        <!-- 添加菜单弹窗 -->
       <div class="tianjiauser">
          <el-dialog
          :title="dialogtitle"
          :close-on-click-modal="false"
          :visible.sync="addVisible"
          width="500px"
        >
          <el-form ref="form" :model="form" :rules="rules">
             <el-form-item label="快速选择 :" :label-width="formLabelWidth">
                  <el-select  v-model="form.orginization" placeholder="请选择需要添加的路由权限">
                    <el-option label="开发部" value="shanghai"></el-option>
                    <el-option label="运营部" value="beijing"></el-option>
                  </el-select>
                </el-form-item>
                 <el-form-item
              label="菜单名称 :"
              :label-width="formLabelWidth"
              placeholder="请输入菜单名称"
              prop="account"
              :value="form.account"
            >
              <el-input   autocomplete="off" v-model="form.account"></el-input>
            </el-form-item>
            <el-form-item
              label="菜单标识 :"
              :label-width="formLabelWidth"
              placeholder="请输入菜单标识"
              prop="nickname"
              :value="form.nickname"
            >
              <el-input autocomplete="off" v-model="form.nickname"></el-input>
            </el-form-item>
            <el-form-item
              label="菜单URL :"
              :label-width="formLabelWidth"
              placeholder="请输入菜单URL"
              prop="address"
              :value="form.address"
            >
              <el-input autocomplete="off" v-model="form.address"></el-input>
            </el-form-item>
           
          </el-form>

          <div slot="footer" class="dialog-footer">
            <el-button @click="cancel">取 消</el-button>
            <el-button type="primary" @click="cancel">确 定</el-button>
          </div>
        </el-dialog>
       </div>
       <!-- *********************************************************************** -->
     <!-- 编辑    -->
       <div class="ys-Editpermission">    
      <el-dialog
          :title="dialogtitle"
          :close-on-click-modal="false"
          :visible.sync="Editpermission"
          width="500px"
        >
          <el-form ref="form" :model="form" :rules="rules">
              <el-form-item label="快速选择 :" :label-width="formLabelWidth">
                  <el-select  v-model="form.orginization" placeholder="请选择需要添加的路由权限">
                    <el-option label="开发部" value="shanghai"></el-option>
                    <el-option label="运营部" value="beijing"></el-option>
                  </el-select>
                </el-form-item>
            <el-form-item
              label="菜单名称 :"
              :label-width="formLabelWidth"
              placeholder="请输入菜单名称"
              prop="account"
              :value="form. account"
            >
              <el-input autocomplete="off" v-model="form.account"></el-input>
            </el-form-item>
            <el-form-item
              label="菜单标识 :"
              :label-width="formLabelWidth"
              placeholder="请输入菜单标识"
              prop="nickname"
              :value="form.nickname"
            >
              <el-input autocomplete="off" v-model="form.nickname"></el-input>
            </el-form-item>
            <el-form-item
              label="菜单URL :"
              :label-width="formLabelWidth"
              placeholder="请输入菜单URL"
              prop="address"
              :value="form.address"
            >
              <el-input autocomplete="off" v-model="form.address"></el-input>
            </el-form-item>
            <el-form-item
              label="菜单备注 :"
              :label-width="formLabelWidth"
              placeholder="请输入菜单备注"
              prop="mobile"
              :value="form.mobile"
            >
              <el-input   autocomplete="off" v-model="form.mobile"></el-input>
            </el-form-item>
          </el-form>

          <div slot="footer" class="dialog-footer">
            <el-button @click="cancel">取 消</el-button>
            <el-button type="primary" @click="cancel">确 定</el-button>
          </div>
        </el-dialog>
        </div>




      </div>
    </div>
  </div>
</template>

<script>
import { apiAddress,apiGetUser } from '@/api/user';// 导入我们的api接口
export default {
  data() {
      const generateData = _ => {
        const data = [];
        const clientType = ['系统管理员','省代','市代']
        clientType.forEach((client,index)=>{
            data.push({
                label:client,
                key:index,
            })
        })     
        
        return data;
      };
    return {

      value: [],
      data: generateData(),
      roleinput: "",
      addVisible: false,
      Editpermission: false,
      roleLimitdialogFormVisible: false,
      dialogtitle: "添加 菜单",
      formLabelWidth: "90px",
      userList:[],
      form: {
        nickname: '',
        mobile: '',       
        account: '',
        password: '',
        address:'',
      },
     
       rules: {
           account: [
          { min: 6, max: 16, required: true, message: '请输入菜单名称', trigger: 'blur' }
        ],
        nickname: [
          { required: true, message: '请输入菜单标识', trigger: 'blur' },
          { message: '长度在 3 到 5 个字符', trigger: 'blur' }
        ],    
      address:[
           { required: true, message: '请输入角色菜单URL', trigger: 'blur' }
      ],
          mobile: [
          { required: true, message: '请输入菜单备注', trigger: 'blur' }
        ],         
        password: [
          { min: 6, max: 16, required: true, message: '请输入6-16位数字或字母', trigger: 'blur' }
        ]
      },
      // 总条数
      total: 0,
       //参数
   queryInfo: {	
     			 query: '',
       			 // 当前页数
        		 pagenum: 1,
       			 // 显示一页多少条数据
       			 pagesize: 1
        	  },
      tableData: [
        {
          date: "2016-05-02",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
        },
        {
          date: "2016-05-04",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1517 弄",
        },
        {
          date: "2016-05-01",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1519 弄",
        },
        {
          date: "2016-05-03",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1516 弄",
        },
      ],
    };
  },
  mounted(){
    this.fenyedianji()
    this.onload()
  },
  methods:{
         //获取全部用户
       onload(){
        apiGetUser({}).then(res=>{
          console.log(res);
        })
       },
        //通过昵称查询用户
      query(val){
        console.log(val);
        apiAddress({
         nickname:val
        }).then(res=>{
          console.log(res);
        })
      },
        // 分页点击
        fenyedianji(){
          this.total=this.tableData.length
        },
      cancel() { // dialog中的表单取消提交
      this.addVisible = false;
      this.Editpermission= false;
      this.$nextTick(() => {
        console.log(this.$refs.form);
        this.$refs.form.resetFields();
      });
    },
    //  设置组织
    checkDetail(val){
       this.dialogFormVisible=true
    },
    // 设置角色
    modifyUser(val){
        this.setRole=true
    },
    //重置密码
    deleteUser(val){
      this.Editpermission=true
    },
    //关闭时确认弹框
    handleClose(done) {
        this.$confirm('确认关闭？')
          .then(_ => {
            done();
          })
          .catch(_ => {});
      },
      //  分页
      //监听 pagesize 改变的事件
          handleSizeChange(newsize){
          //这里conso 选中第几页 最新的值
          console.log(newsize)
          //最新的条数（newsize）赋值给 动态的 pagesie
          this.queryInfo.pagesize = newsize
          //获取到最新一页显示的数据  重新发送axios请求 这里是封装好的请求方法
          this.userlistinfo()
          },


           // 监听 页码值 改变的事件
           handleCurrentChange(newPage) {
           console.log(newPage)
           //把最新的页码（newPage）赋值给 动态的 pagenum 
           this.queryInfo.pagenum = newPage
           //获取到最新显示的页码值  重新发送axios请求 这里是封装好的请求方法
           this.userlistinfo()
          }


   
  }
};
</script>